<script setup>
	import { ref, onMounted } from 'vue'
	import { useUserStore } from '@/store/userInfo'

	const userStore = useUserStore( )
	const cateApi = uniCloud.importObject( 'cate' )

	// 分类列表数据
	const cateList = ref( [ ] )
	// 弹窗引用
	const popup = ref( null )
	// 是否编辑模式
	const isEdit = ref( false )
	// 表单数据
	const formData = ref( {
		cate_name: ''
	} )

	// 在顶部添加防抖函数
	const showToastDebounced = ( ( ) => {
		let timer = null
		return ( options ) => {
			if ( timer ) clearTimeout( timer )
			timer = setTimeout( ( ) => {
				uni.showToast( options )
			}, 300 )
		}
	} )( )

	// 获取分类列表
	const getCateList = async ( ) => {
		const result = await cateApi.get( )
		cateList.value = result.data
	}

	// 打开新增分类弹窗
	const handleAdd = ( ) => {
		isEdit.value = false
		formData.value = {
			cate_name: ''
		}
		popup.value.open( )
	}

	// 打开编辑分类弹窗
	const handleEdit = ( item ) => {
		isEdit.value = true
		formData.value = {
			_id: item._id,
			cate_name: item.cate_name
		}
		popup.value.open( )
	}

	// 删除分类
	const handleDelete = async ( id ) => {
		try {
			const res = await uni.showModal( {
				title: '提示',
				content: '确定要删除该分类吗？',
				confirmColor: '#ff4d4f'
			} )

			if ( !res.confirm ) return

			const result = await cateApi.remove( id, userStore.userInfo.role[ 0 ] )
			if ( result.errCode === 0 ) {
				showToastDebounced( {
					title: '删除成功',
					icon: 'success'
				} )
				getCateList( )
			} else {
				showToastDebounced( {
					title: result.errMsg,
					icon: 'none'
				} )
			}
		} catch ( e ) {
			showToastDebounced( {
				title: '删除失败',
				icon: 'none'
			} )
		}
	}

	// 提交表单
	const submitForm = async ( ) => {
		if ( !formData.value.cate_name ) {
			showToastDebounced( {
				title: '请输入分类名称',
				icon: 'none'
			} )
			return
		}

		try {
			const result = isEdit.value ?
				await cateApi.update( formData.value, userStore.userInfo.role[ 0 ] ) :
				await cateApi.add( formData.value, userStore.userInfo.role[ 0 ] )

			if ( result.errCode === 0 ) {
				popup.value.close( )
				setTimeout( ( ) => {
					showToastDebounced( {
						title: '成功',
						icon: 'success'
					} )
				}, 500 )
				getCateList( )
			} else {
				setTimeout( ( ) => {
					showToastDebounced( {
						title: result.errMsg,
						icon: 'none'
					} )
				}, 500 )
			}
		} catch ( e ) {
			showToastDebounced( {
				title: '失败',
				icon: 'none'
			} )
		}
	}

	onMounted( ( ) => {
		getCateList( )
	} )
</script>

<template>
	<view class="cate-manage">
		<!-- 分类列表 -->
		<view class="cate-list">
			<view class="cate-item" v-for="item in cateList" :key="item._id">
				<view class="cate-info">
					<view class="info">
						<view class="name-row">
							<text class="name">{{ item.cate_name }}</text>
							<view class="actions">
								<button class="btn edit" @tap="handleEdit(item)">编辑</button>
								<button class="btn delete" @tap="handleDelete(item._id)">删除</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部安全区域占位 -->
		<view class="safe-area"></view>

		<!-- 添加分类按钮 -->
		<view class="add-btn" @tap="handleAdd">
			<uni-icons custom-prefix="iconfont" type="yuan-tianjia" color="#fff" :size="24" />
			<text>新增分类</text>
		</view>

		<!-- 新增/编辑弹窗 -->
		<uni-popup ref="popup" type="dialog">
			<view class="popup-content">
				<view class="popup-title">{{ isEdit ? '编辑分类' : '新增分类' }}</view>
				<view class="form-item">
					<text class="label">分类名称</text>
					<input type="text" v-model="formData.cate_name" placeholder="请输入分类名称" />
				</view>
				<view class="popup-buttons">
					<button class="btn cancel" @tap="popup.close()">取消</button>
					<button class="btn confirm" @tap="submitForm">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<style lang="scss" scoped>
	.cate-manage {
		min-height: 100vh;
		padding: 24rpx;
		padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
		background-color: $page-bg-color;

		/* 分类列表样式 */
		.cate-list {
			.cate-item {
				margin-bottom: 24rpx;
				padding: 24rpx;
				background-color: #fff;
				border-radius: 16rpx;

				.cate-info {
					.info {
						.name-row {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.name {
								font-size: 32rpx;
								color: $text-font-color-1;
								font-weight: 600;
							}

							.actions {
								display: flex;
								align-items: center;

								.btn {
									margin-left: 16rpx;
									padding: 8rpx 24rpx;
									border-radius: 8rpx;
									font-size: 24rpx;
									line-height: 1.5;
									background-color: transparent;

									&::after {
										border: none;
									}

									&.edit {
										color: $brand-theme-color;
										border: 2rpx solid $brand-theme-color;
									}

									&.delete {
										color: #ff4d4f;
										border: 2rpx solid #ff4d4f;
									}

									&:active {
										opacity: 0.8;
									}
								}
							}
						}
					}
				}
			}
		}

		/* 底部安全区域占位 */
		.safe-area {
			height: 120rpx;
			/* 按钮高度 + 上下间距 */
			width: 100%;
		}

		/* 添加按钮样式 */
		.add-btn {
			position: fixed;
			right: 48rpx;
			bottom: calc(48rpx + constant(safe-area-inset-bottom));
			/* 兼容 iOS < 11.2 */
			bottom: calc(48rpx + env(safe-area-inset-bottom));
			/* 兼容 iOS >= 11.2 */
			display: flex;
			align-items: center;
			padding: 24rpx 48rpx;
			background-color: $brand-theme-color;
			border-radius: 44rpx;
			color: #fff;
			box-shadow: 0 4rpx 16rpx rgba(70, 176, 254, 0.3);

			text {
				margin-left: 12rpx;
				font-size: 28rpx;
			}

			&:active {
				opacity: 0.8;
			}
		}
	}

	/* 弹窗样式 */
	.popup-content {
		padding: 24rpx;
		width: 560rpx;
		background-color: #fff;
		border-radius: 12rpx;

		.popup-title {
			text-align: center;
			font-size: 32rpx;
			font-weight: 600;
			margin-bottom: 24rpx;
		}

		.form-item {
			margin-bottom: 24rpx;

			.label {
				display: block;
				margin-bottom: 12rpx;
				font-size: 28rpx;
				color: $text-font-color-2;
			}

			input {
				width: 100%;
				height: 80rpx;
				padding: 0 24rpx;
				background-color: $page-bg-color;
				border-radius: 8rpx;
				font-size: 28rpx;
				box-sizing: border-box;
			}
		}

		.popup-buttons {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 24rpx;
			gap: 24rpx;

			.btn {
				flex: 1;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0;
				border-radius: 8rpx;
				font-size: 28rpx;

				&.cancel {
					background-color: $page-bg-color;
					color: $text-font-color-2;
				}

				&.confirm {
					background-color: $brand-theme-color;
					color: #fff;
				}

				&:active {
					opacity: 0.8;
				}
			}
		}
	}
</style>